<template>
  <div class="dialog">
    <div class="top">活动信息</div>
    <div class="close"></div>
    <div class="oneTop">基本信息</div>
    <div class="basicMessage">
      <div class="box" v-for="(value, key) in basicMessage" :key="key">
        <span class="label">{{ key }}：</span>
        <span class="value">{{ value }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
let basicMessage = ref({
  活动名称: 'xxxx',
  活动时间: 'xxxx',
  活动地点: 'xxxx',
  报名人员: 'xxxxxxx',
  报名人次: 'xxxxx',
  参与人员: 'xxxxx',
  参与人次: 'xxxxx',
  活动类型: 'xxxxxxx'
})
</script>
<style scoped lang="scss">
.dialog {
  width: 822.5px;
  height: 609.5px;
  box-sizing: border-box;
  background: url('@/assets/images/dialog/dialogBg.png') no-repeat;
  background-size: 100% 100%;
  position: fixed;
  top: 470px;
  left: 50%;
  transform: translate(-50%, -50%);
  .close {
    position: absolute;
    top: 60px;
    right: 47px;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    background: url('@/assets/images/dialog/close.png') no-repeat;
    background-size: 100% 100%;
  }
  .top {
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-style: italic;
    color: #3ffff8;
    margin: 34px 0 0 95px;
  }
  .oneTop {
    text-align: center;
    width: 123.5px;
    height: 26.5px;
    box-sizing: border-box;
    background: url('@/assets/images/dialog/labelBg.png') no-repeat;
    background-size: 100% 100%;
    line-height: 26.5px;
    margin: 22px 0 0 40px;
    font-size: 19px;
    font-family: shsc;
  }
  .basicMessage {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0 0 40px;
    .box {
      width: 50%;
      margin-bottom: 6px;
      .label {
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #ffffff;
      }
      .value {
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #ffd325;
      }
    }
  }
}
</style>
